<template>
  <div class="csssd">
    <p class="typing-effect">{{ currentText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一段多行文字，你可以随意修改为你想要展示的内容。这是一段多行文字，你可以随意修改为你想要展示的内容。',
      currentText: '',
      showTypingEffect: true
    }
  },
  methods: {
    startTypingEffect() {
      this.showTypingEffect = true
      this.typingEffect()
    },
    typingEffect() {
      let index = 0

      const intervalId = setInterval(() => {
        this.currentText += this.text[index]
        index++

        if (index === this.text.length) {
          clearInterval(intervalId)
          // 设置一个延时，然后重置状态，以便重新触发动画
          setTimeout(() => {
            // this.currentText = ''
            this.showTypingEffect = false
          }, 2000)
        }
      }, 100)
    }
  },
  watch: {
    showTypingEffect(newValue) {
      if (newValue) {
        this.typingEffect()
      }
    }
  },
  mounted() {
    this.startTypingEffect()
  }
}
</script>

<style>
.typing-effect {
  /* overflow: hidden;
  white-space: nowrap; */
}
.csssd {
  /* text-align: center; */
  background-color: red;
  height: 200px;
  width: 300px;
}
</style>
